<template>
  <div style="position: relative">
    <Spin :withIcon="true" v-if="loading"></Spin>
    <div class="filter-line flx-row-s-c">
      <span class="item-name">状态类型</span>
      <Select v-model="typeSelect" style="width: 150px" clearable>
        <Option
          v-for="item in typeList"
          :value="item.value"
          :key="item.value"
          >{{ item.name }}</Option
        >
      </Select>
      <span class="item-name">申请时间</span>
      <DatePicker
        :editable="false"
        type="daterange"
        split-panels
        clearable
        placeholder="请选择"
        style="width: 210px"
        @on-change="dateChange"
        :value="time"
      ></DatePicker>
      <div
        class="user-strong-button line-button-size"
        style="margin: 0 10px 0 30px"
        @click="pageChange(1)"
      >
        搜索
      </div>
      <div class="user-normal-button line-button-size" @click="reset">重置</div>
    </div>
    <div class="listTable-area">
      <div class="filter-line search-result-line flx-row-bw-c">
        <span class="c-black f-14"
          >发票列表<span class="c-o">{{
            total != null ? ` (${total}) ` : ""
          }}</span></span
        >
      </div>
      <table class="table-area">
        <thead>
          <tr>
            <th><div class="line-style" style="justify-content: center;min-width: 48px">序号</div></th>
            <th><div class="line-style">发票金额</div></th>
            <th><div class="line-style">发票抬头</div></th>
            <th><div class="line-style">申请时间</div></th>
            <th><div class="line-style">快递单号</div></th>
            <th><div class="line-style">状态</div></th>
            <th><div class="line-style">操作</div></th>
          </tr>
        </thead>
        <tbody>
          <tr
            v-for="(item, index) in list"
            :key="index"
            :class="[(index + 1) % 2 != 0 ? 'lc-f' : 'lc-F9FAFB']"
          >
            <td>
              <div class="line-style" style="justify-content: center;">
                <span class="normal-f">{{ index + 1 + (page - 1) * pageSize }}</span>
              </div>
            </td>
            <td>
              <div class="line-style">
                <span class="normal-f">￥{{ item.amount }}</span>
              </div>
            </td>
            <td>
              <div class="line-style">
                <span class="normal-f f-ell-sin">{{ item.header }}</span>
              </div>
            </td>
            <td>
              <div class="line-style">
                <span class="normal-f">{{ item.createdTime }}</span>
              </div>
            </td>
            <td>
              <div class="line-style">
                <span class="normal-f">{{
                  item.expressNumber ? item.expressNumber : "-"
                }}</span>
              </div>
            </td>
            <td>
              <div class="line-style">
                <span class="normal-f f-ell-sin">{{
                  item.status == 0
                    ? "未处理"
                    : item.status == 1
                    ? "待审核"
                    : item.status == 2
                    ? "待开票"
                    : item.status == 3
                    ? "已开票"
                    : item.status == 4
                    ? "待寄出"
                    : item.status == 5
                    ? "已寄出"
                    : item.status == 6
                    ? "审核未通过"
                    : item.status == 7
                    ? "用户取消"
                    : "-"
                }}</span>
              </div>
            </td>
            <td>
              <div class="line-style normal-f">
                <div class="form-font-button" @click="toDetail(item.id)">
                  详情
                </div>
                <div class="form-font-button" @click="cancelInvoice(item.id)">
                  取消
                </div>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
      <Empty-State
        v-if="total != null && total == 0"
        content="未搜索到任何内容！"
      ></Empty-State>
      <div class="form-page-bottom-area flx-row-c-c">
        <Page
          :total="total"
          :current="page"
          :page-size="pageSize"
          :page-size-opts="pageSizeOpts"
          @on-change="pageChange"
          @on-page-size-change="pageSizeChange"
          show-elevator
          show-sizer
          show-total
        />
      </div>
    </div>
  </div>
</template>

<script>
import { getInvoiceList, cancelInvoice } from "@/api/user";
export default {
  name: "VipInvoiceManagement",
  data() {
    return {
      loading: false,
      typeList: [
        {
          name: "未处理",
          value: 0,
        },
        {
          name: "待审核",
          value: 1,
        },
        {
          name: "待开票",
          value: 2,
        },
        {
          name: "已开票",
          value: 3,
        },
        {
          name: "待寄出",
          value: 4,
        },
        {
          name: "已寄出",
          value: 5,
        },
        {
          name: "审核未通过",
          value: 6,
        },
        {
          name: "用户取消",
          value: 7,
        },
      ],
      typeSelect: null,
      startTime: "",
      endTime: "",
      time: [],

      // 分页设置
      total: null,
      pageSizeOpts: [50, 100, 200],
      pageSize: 50,
      page: 1,
      list: [],
    };
  },
  created() {
    this.getList();
  },
  methods: {
    // 日期选择改变
    dateChange(date) {
      this.startTime = date[0];
      this.endTime = date[1];
    },
    // 切换pageSize
    pageSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.pageChange(1);
    },
    // 切换页码
    pageChange(page) {
      this.page = page;
      this.getList();
    },
    // 重置
    reset() {
      this.typeSelect = null;
      this.startTime = "";
      this.endTime = "";
      this.page = 1;
      this.getList();
    },
    async getList() {
      this.loading = true;
      let params = {
        status: this.typeSelect,
        startTime: this.startTime,
        endTime: this.endTime,
        limit: this.pageSize,
        page: this.page,
      };
      let res = await getInvoiceList(params);
      if (res.code == 200) {
        if (
          this.page > 1 &&
          res.data.total <= (this.page - 1) * this.pageSize
        ) {
          this.page =
            res.data.total == 0 ? 1 : Math.ceil(res.data.total / this.pageSize);
          this.getList();
          return;
        }
        this.list = res.data.list;
        this.total = res.data.total;
      }
      this.loading = false;
    },
    // 取消申请发票
    cancelInvoice(id) {
      this.$Modal.confirm({
        title: "取消确认",
        content: "<p>确定要取消申请此发票吗？</p>",
        onOk: async () => {
          let res = await cancelInvoice({ id: id });
          if (res.code == 200) {
            this.$Message.success("取消成功！");
            this.getList();
          }
        },
      });
    },
    // 查看详情
    toDetail(id) {
      this.$router.push({
        name: "invoiceDetail",
        query: {
          id: id,
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.listTable-area {
  margin-top: 30px;
  padding: 30px;
  position: relative;
  left: -30px;
  width: calc(100% + 60px);
  border-top: 20px solid #f3f6fb;
}
</style>
